$(function () {
  // ************ 图片拖拽
  var params = {
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false,
  };

  // 获取相关CSS属性
  var getCss = function (o, key) {
    if (!o) return;
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
  };

  // 拖拽的实现
  var startDrag = function (bar, target, callback) {
    if (getCss(target, "left") !== "auto") {
      params.left = getCss(target, "left");
    }
    if (getCss(target, "top") !== "auto") {
      params.top = getCss(target, "top");
    }

    // bar 是拖拽的触发区域
    bar.onmousedown = function (event) {
      params.flag = true;
      if (!event) {
        event = window.event;
        // 防止IE文字选中
        bar.onselectstart = function () {
          return false;
        };
      }

      var e = event;
      params.currentX = e.clientX;
      params.currentY = e.clientY;
    };

    document.onmouseup = function () {
      params.flag = false;
      if (getCss(target, "left") !== "auto") {
        params.left = getCss(target, "left");
      }
      if (getCss(target, "top") !== "auto") {
        params.top = getCss(target, "top");
      }
    };

    document.onmousemove = function (event) {
      var e = event ? event : window.event;
      if (params.flag) {
        var nowX = e.clientX, nowY = e.clientY;
        var disX = nowX - params.currentX, disY = nowY - params.currentY;
        target.style.left = parseInt(params.left) + disX + "px";
        target.style.top = parseInt(params.top) + disY + "px";

        if (typeof callback == "function") {
          callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
        }
        if (event.preventDefault) {
          event.preventDefault();
        }
        return false;
      }
    };
  };

  // **************** 地图放大缩小
  var scale = 10;
  function handleZoom(event) {
    var delta = event.originalEvent.deltaY;

    if (delta > 0) {
      scale--;
    } else {
      scale++;
    }
    scale = Math.min(Math.max(scale, 5), 100);
    $('#zoomImage').css({ transform: 'scale(' + scale / 10 + ')' });
  }

  // ******** 地图底部 legend 菜单切换 ******************
  var mapOptions = [
    {
      title: "现状",
      url: 'img/index/map_completed.jpg'
    },
    {
      title: '高标准农田',
      url: 'img/index/map_total.jpg'
    },
    {
      title: '规划项目',
      url: 'img/index/map_future.jpg'
    }
  ];
  for (var i = 0; i < mapOptions.length; i++) {
    $(".module-switch").append('<li class="fl' + (i === 0 ? " active" : " ") + '">' + mapOptions[i].title + '<i></i></li>');
  }
  $(".module-switch li").click(function () {
    const idx = $(this).index();
    $(this).addClass("active").siblings().removeClass("active");
    $('#dialog-title').html(mapOptions[idx].title);
    $('#myDialog .dialog-context').html(
      '<img id="zoomImage" height="100%" src="' + mapOptions[idx].url + '" alt="' + mapOptions[idx].title + '" />'
    );
    $('#myDialog').show(600);
    $('#dialog-layer').show();
    startDrag(document.getElementById("zoomImage"), document.getElementById("zoomImage"));
  });

  //********************** 地图对话框事件处理 */
  $('#myDialog .dialog-context').on('mousewheel', function (event) {
    event.preventDefault(); // Prevent default scrolling behavior
    handleZoom(event);
  });

  $('.btn-plug').click(function () {
    handleZoom({ originalEvent: { deltaY: -1 } }); // Simulate zoom in
  });

  $('.btn-reduce').click(function () {
    handleZoom({ originalEvent: { deltaY: 1 } }); // Simulate zoom out
  });
  $('.btn-reset').click(function () {
    $('#zoomImage').css({ transform: 'scale(1)' });
  });

  // ************ 地图初始化方法
  var geoMap = echarts.init(document.getElementById('map'));
  function initGeoMap(pointArrayData) {
    $.get('./js/suining_geo.json', function (map) {
      echarts.registerMap("suining", map);
      var option = {
        tooltip: {
          show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。
          trigger: 'item', //触发类型。item,axis,none
          enterable: true,//鼠标是否可进入提示框浮层中，默认为false，
          showContent: true,          //是否显示提示框浮层
          triggerOn: 'mousemove',//提示框触发的条件(mousemove|click|none)  
          showDelay: 0,               //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
          textStyle: {
            color: '#fff',
            fontSize: 14,
            zIndex: 9999,
            userSelect: 'text' // 允许文字选中
          },
          padding: [20, 10],
          hideDelay: 500,             //浮层隐藏的延迟
          position: 'right', // 设置tooltip相对于鼠标的位置，可以是 'top'、'left'、'right'、'bottom'
          alwaysShowContent: true,
          transitionDuration: 1,
          backgroundColor: 'rgba(0, 0, 0, 0.9)', // 修改背景颜色透明度
          borderColor: 'rgba(255, 255, 255, 0.5)', // 修改边框颜色透明度
          formatter: function (e) {
            if (e.componentSubType === 'map') {
              return '';
            } else {
              return (
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">二维码编号:</div>' +
                '<div>' + e.data.shopQrcode + '</div>' +
                '</div>' +
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">项目:</div>' +
                '<div>' + e.data.name + '</div>' +
                '</div>' +
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">区域:</div>' +
                '<div>' + e.data.area + '</div>' +
                '</div>' +
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">标段:</div>' +
                '<div>' + e.data.biaoduan + '</div>' +
                '</div>' +
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">经度:</div>' +
                '<div>' + e.data.jingdu + '</div>' +
                '</div>' +
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">纬度:</div>' +
                '<div>' + e.data.weidu + '</div>' +
                '</div>' +
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">负责人:</div>' +
                '<div>' + e.data.fuzerenname + '</div>' +
                '</div>' +
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">项目经理:</div>' +
                '<div>' + e.data.xiangmujingliname + '</div>' +
                '</div>' +
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">施工单位:</div>' +
                '<div>' + e.data.shigongdanwei + '</div>' +
                '</div>' +
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">监理:</div>' +
                '<div>' + e.data.jianliname + '</div>' +
                '</div>' +
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">监理总监:</div>' +
                '<div>' + e.data.jianlizongjianName + '</div>' +
                '</div>' +
                '<div style="display: flex; flex-direction: row; line-height: 2;">' +
                '<div style="width: 80px; text-align: left; padding-right: 10px;">监理单位:</div>' +
                '<div>' + e.data.jianlidanwei + '</div>' +
                '</div>'
              );
            }
          }
        },
        geo: {
          show: true,
          map: 'suining',
          // top: 90,
          // left: 100,
          zoom: 1,
          aspectScale: 1,
          selectedMode: 'multiple',
          hoverable: true,
          roam: true,
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderColor: '#1ba0f8',
              areaColor: '#23539b',
              label: {
                show: true,
                textStyle: {
                  color: '#ffffff',
                  fontSize: 16
                }
              }
            },
            emphasis: {
              borderWidth: 1,
              borderColor: '#00ffff',
              areaColor: '#1ba0f8',
              label: {
                show: true,
                textStyle: {
                  color: '#ffffff',
                }
              }
            }
          },
          label: {
            show: true,  // 控制地图上的文字是否显示
            textStyle: {
              color: '#ffffff',  // 文字颜色
              fontSize: 16       // 文字大小
            }
          }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            data: pointArrayData,
            // symbolSize: 20,
            symbol: 'image://img/index/map-marker.png',  // 图片路径
            symbolSize: [32, 32],  // 图片大小，可以根据实际需求调整
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              show: false,
              formatter: '{b}',
              position: 'right',
              color: '#fff',
              fontSize: 14
            },
            itemStyle: {
              color: 'green',
              // borderColor: '#00ffff', // 边框颜色
              // borderWidth: 2,         // 边框宽度
              // shadowBlur: 10,
              // shadowColor: '#00ffff'
            },
            emphasis: {
              label: {
                show: true
              },
              itemStyle: {
                color: 'red',        // 选中状态颜色
                borderColor: '#fff', // 选中状态边框颜色
                borderWidth: 3,      // 选中状态边框宽度
                shadowBlur: 15,
                shadowColor: '#fff'
              }
            },
            markPoint: {
              symbol: 'pin',
              symbolSize: 50,
              label: {
                show: true,
                formatter: '{b}',
                color: 'blue'         // 标注点标签颜色
              },
              itemStyle: {
                color: 'yellow'       // 标注点颜色
              }
            }
          }
        ]
      };
      geoMap.setOption(option);
    });
  }

  // ************ 地图初始化数据拉取 - 异步 ***********************
  function getAllShopList() {
    $.ajax({
      url: 'https://jianliapi.jiashengqizhi.com/m.api',
      type: 'post',
      data: {
        _gp: 'admin.front',
        _mt: 'shopList',
        type: 1,
        page: 1,
        limit: 10000
      },
      contentType: 'application/x-www-form-urlencoded', // 传参格式（默认为表单） json为application/json
      dataType: 'json',
      success: function (res) {
        try {
          // 剔除无坐标数据
          var pointArray = res.data
            .filter(item => item.jingdu && item.weidu)
            .map(item => {
              return {
                ...item,
                name: item.shopName,
                value: [item.jingdu, item.weidu],
                index: item.id
              };
            })
          // 调用地图初始化方法，传入数据
          initGeoMap(pointArray);
        } catch (error) {
          console.error('Error in getAllShopList:', error);
        }
      },
      error: function (err) {
        console.log('err', err);
      }
    })
  }

  // ************* 地图全屏切换操作
  $('#btn-toggle').click(function () {
    if ($('.middle-map').hasClass("middle-map-full")) {
      $('.middle-map').removeClass("middle-map-full");
      $('.aside-left').show(300);
      $('.aside-right').show(300);
      $(this).attr('title', '全屏展示');
      $(this).html('<img src="./img/index/expand.png" alt="全屏展示"/><p>全屏</p>');
    } else {
      $('.middle-map').addClass("middle-map-full");
      $('.aside-left').slideToggle(300);
      $('.aside-right').slideToggle(300);
      $(this).attr('title', '取消全屏');
      $(this).html('<img src="./img/index/small.png" alt="取消全屏"/><p>返回</p>');
    }
    // 销毁原有的 echarts 实例
    geoMap.dispose();
    // 重新初始化地图
    geoMap = echarts.init(document.getElementById('map'));
    geoMap.resize();
    setTimeout(() => {
      getAllShopList();
    }, 500);
  });

  // ********* 页面初始化调用
  getAllShopList();
});